﻿/* top-bar */
.image-browser .top-bar,
.image-browser .search {
    background-color: #f8f8f8;
    padding: 3px 7px 3px 5px;
    border-bottom: 1px solid #d3d5d8;
}

.image-browser .top-bar
{
    min-height: 16px;
}

.image-browser .top-bar .directory-up {
    padding-left: 20px;
    background: transparent url('images\\directory-up.png') no-repeat top left;
}

.image-browser .top-bar .directory {
    padding-left: 20px;
    font-weight: bold;
    background: transparent url('images\\directory.png') no-repeat top left;
    float: left;
}

.image-browser .top-bar .directory-path {
    font-size: 85%;
    color: #555;
    float: left;
    margin-left: 5px;
    width: auto;
    cursor: pointer;
}

.image-browser .top-bar .directory-path .breadcrumb-separator 
{
    display:inline-block;
    width: 0; 
	height: 0;
    margin-left: 5px;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-left: 3px solid  #58595b;
}

.image-browser .top-bar .directory-path a:hover 
{
    text-decoration: underline;
    color: black;
}

.image-browser .top-bar ul {
    margin: 0;
    width: 100%;
}

.image-browser .top-bar ul li {
    float: left;
    padding: 0 3px 0 3px;
    cursor: pointer;
}

.image-browser .top-bar ul li.active {
    background: #58595b url(images/tabstrip_connector_compact.png) center bottom no-repeat;
}

.image-browser .top-bar ul li.active a {
    color: white;    
}

.image-browser .top-bar.tabs {
    padding: 0 7px 0 5px;
    height: 30px;
}

.image-browser .top-bar.tabs li {
    padding: 5px 12px 6px;    
}



/* ***** ***** ***** ***** ***** */
/* search */
/* ***** ***** ***** ***** ***** */
.image-browser .search {
    padding-right: 0;   
}

.image-browser .search-input {
    width: 200px;
    display: inline-block;
}

.image-browser .search-recursive {
    float: right;
    display: inline-block;
}



/* ***** ***** ***** ***** ***** */
/* new directory */
/* ***** ***** ***** ***** ***** */
.image-browser .explorer .new-directory {
    height: 100%;
    background-color: rgb(248, 249, 249);
    padding: 0 3px 0 1px;
}

.image-browser .explorer .new-directory input {
    width: 100%;
}


/* ***** ***** ***** ***** ***** */
/* explorer */
/* ***** ***** ***** ***** ***** */
.image-browser .explorer {
    overflow-y: auto;
    overflow-x: hidden;
    top: 90px;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}

.image-browser .explorer ul {
    width: 100%;
    margin: 7px 0 0 3px;
}

.image-browser .explorer ul li {
    float: left;
    margin: 0 3px 5px 2px;
}




/* ***** ***** ***** ***** ***** */
/* directories */
/* ***** ***** ***** ***** ***** */
.image-browser li .directory {
    background: white url('images\\background.png') repeat top left;
    border: solid 1px  #ABABAB; /*#58595b;*/
    width: 120px;
    height: 75px;
    cursor: pointer;
    position: relative;
}

.image-browser li .directory .directory-content {
    text-align: center;
    line-height: 0;
    vertical-align: middle;
    height: 100%;
}

.image-browser li .directory .directory-content img
{
    max-width: 120px;
    max-height: 75px;
}

.image-browser .directory .delete 
{
    border: 1px solid #768388;
    position: absolute;
    top: 1px;
    left: 2px;
    border-radius: 3px;
    padding: 2px 4px 2px 4px;
    line-height: 16px;
    background-color: white;
    display: none;
}

.image-browser .directory:hover .delete  {
    display: inline-block;
}

.image-browser .directory .delete:hover {
    background-color: #a0a0a0;
}

.image-browser .directory .delete span {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: transparent url('images/icons/commonIcons16x16.png') no-repeat 0 -192px;
}


/* ***** ***** ***** ***** ***** */
/* directory footer */
/* ***** ***** ***** ***** ***** */
.image-browser li .directory .directory-footer
{
    text-align: center;
    padding: 0 0 0 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: text;
    color: black;
    background-color: #ABABAB;/*rgb(248, 249, 249);*/
}

.image-browser li .directory .directory-footer:hover {
    background-color: #A0A0A0;
}

.image-browser li .directory .directory-footer span {
    display: inline-block;
    overflow: hidden;
}

.image-browser li .directory .directory-footer .text 
{
    width: 100%;
    text-align: left;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
}

.image-browser li .directory .totalNumber 
{
    position: absolute;
    text-align: center;
    top: 0;
    right: 0;
    min-width: 15px;
    padding: 0 2px 0 2px;
    background-color: #ABABAB;
}

.image-browser li .directory .directory-footer input {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #c7d500;
}



/* ***** ***** ***** ***** ***** */
/* File */
/* ***** ***** ***** ***** ***** */
.image-browser li .file {
    position: relative;

    min-width: 50px;
    max-width: 150px;
    height: 75px;

    border: 1px solid white;
}

.image-browser li .file.selected {
    border: 2px solid red;
    height: 73px;
}


.image-browser li .file .selectionMarker {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 30px solid #c7d500;
    border-left: 30px solid transparent;
}

.image-browser li .file .file-content {
    line-height: 0;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    min-width: 50px;
    max-width: 150px;
    max-height: 75px;
    height: 75px;
    overflow: hidden;
}

.image-browser li .file:hover {
    background-color: #DEDEDE;
    border-color: #083A87;
}



.image-browser-new-file,
.image-browser-new-folder {
    background:  url('images/icons/commonIcons16x16.png') 0px -240px no-repeat;
    margin-top: 3px;
    height: 16px;
    width: 16px;
}

.image-browser-new-folder {
    background-position: 0 -368px;
}

.image-browser li .file .context-menu {
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 4px 1px 4px;
    vertical-align: middle;
    text-align: center;
    z-index: 10000;
    background-color: #c0c0c0;
}

.image-browser li .file .context-menu:hover
{
    background-color: #a0a0a0;
}

.image-browser .menu-preview,
.image-browser .menu-edit,
.image-browser .menu-delete,
.image-browser .menu-rename
 {
    width: 16px;
    height: 16px;
 }

.image-browser .menu-preview {
    background: Transparent url('images/icons/commonIcons16x16.png') no-repeat 0 -224px;
}

.image-browser .menu-delete {
    background: Transparent url('images/icons/commonIcons16x16.png') no-repeat 0 -192px;
}

.image-browser .menu-rename {
    background: Transparent url('images/icons/commonIcons16x16.png') no-repeat 0 -512px;
}

.image-browser .menu-edit 
{
    background: Transparent url('images\\image-edit.png') no-repeat top left;
}



/* ***** ***** ***** ***** ***** */
/* Selected image */
/* ***** ***** ***** ***** ***** */
.image-browser li div.file.selected {
    border: 2px solid #c7d500;
    height: 73px;
}

.image-browser li div.file.selected .file-content 
{
    height: 73px;
    max-width: 148px;
}

.image-browser li div.file.selected .file-content img
{
    max-height: 73px;
    max-width: 148px;
}

.image-browser li .file.selected .selectionMarker {
    display: block;
}